/**
 * 学习目标：useState() 可以调用多次，声明多个状态
 *   语法：
 *      const [ 访问state的变量名, 设置state的函数名 ] = useState(初始值)
 *
 *   注意事项：
 *      1. useState 需要主动导入
 *      2. 函数组件没有 this (this的值为 undefined)
 */
import { useState } from 'react'

export default function App() {
  // 以前的写法
  // state = {
  //   count: 0,
  //   isShow: true
  // }
  // 现在的写法
  const [count, setCount] = useState(0)

  const handleClick = () => {
    // 以前的写法
    // this.setState({ count: this.state.count + 1  })
    // 现在的写法
    setCount(count + 1)
  }

  // 为函数组件添加多个状态，再调用 useState 即可
  const [isShow, setIsShow] = useState(true)
  // 函数组件 return 的内容用于页面渲染的，相当于 Vue 的模板
  return (
    <div>
      <h1>useState基本用法 - 第一个 state</h1>
      <h2>count:{count}</h2>
      <button onClick={handleClick}>点击+1</button>

      <h1>开关切换效果 - 第二个 state</h1>
      <button onClick={() => setIsShow(!isShow)}>点击切换显示隐藏</button>
      <h3 hidden={!isShow}>你看不到我</h3>
    </div>
  )
}
